<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="like_box">
        <ul>
          <li
            v-for="(item, index) in goodsList"
            :key="index"
            @click="toDeatls(item)"
          >
            <!-- <router-link
              :to="{ name: 'details', params: { gid: item.GoodsID } }"
            > -->
            <lazy-component>
              <img v-lazy="item.GoodsPic" />
            </lazy-component>
            <p class="like_text">{{ item.GoodsName }}</p>
            <p class="price">
              <span class="pice">{{ item.GoodsPrice }}.00</span>
              <van-tag class="tag" color="#7232dd">自营</van-tag>
              <img
                class="pic"
                src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/f3.png"
                alt=""
              />
            </p>
            <p style="height: 20px"></p>
            <!-- </router-link> -->
          </li>
        </ul>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsList: [],
      loading: false,
      finished: false,
      page_num: 1,
      totol: 0,
    };
  },
  created() {},
  mounted() {
    this.getGoodslist();
  },
  methods: {
    toDeatls(item) {
      item.Newtime = new Date();
      this.$store.commit("setCount", item);
      this.$router.push({ name: "details", params: { gid: item.GoodsID } });
    },
    async getGoodslist() {
      try {
        const { data: res } = await this.$http.get("list", {
          params: { page_num: this.page_num, page_size: 10 },
        });
        console.log(res);
        if (res.status !== 200) return this.$toast("数据加载失败");
        res.data.forEach((item) => {
          item.GoodsPic = this.imgUrl + item.GoodsPic;
        });
        if (res.status == 200) {
          this.loading = false;
          if (res.data.length) {
            this.goodsList.push(...res.data);
            this.totol = res.paging.total;
          } else {
            this.finished = true;
          }
        }
      } catch (error) {
        this.$toast("数据获取异常");
      }
    },
    onLoad() {
      this.page_num += 1;
      setTimeout(() => {
        this.getGoodslist();
      }, 1500);
    },
  },
};
</script>
<style lang="less" scoped>
.like_box {
  ul {
    overflow: hidden;
    background: #f6f6f6;

    li {
      float: left;
      width: 46%;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      box-sizing: border-box;
      padding: 2px;
      margin: 6px;
      background: white;
      border-radius: 10px;
      img:nth-child(1) {
        width: 100%;
        border-radius: 10px;
        height: 12.5rem;
      }
      .like_text {
        height: 2.5rem;
        font-size: 0.9rem;
        padding-top: 0.5rem;
        color: #1a1a1a;
        line-height: 1.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 3px;
      }
      .price {
        padding-top: 0.5rem;
        height: 1rem;
        line-height: 1rem;
        padding: 3px;
        .pice {
          color: #fa2c19;
          font-size: 1rem;
        }
        .tag {
          margin-left: 9px;
        }
        .pic {
          float: right;
          width: 12%;
        }
      }
      .pice:before {
        content: "￥";
      }
    }
  }
}
.like_title {
  padding: 0.5rem;
  height: 4.8rem;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding-right: 0.2rem;
  margin-bottom: 6px;
  img {
    height: 10rem;
    width: 16rem;
    /* vertical-align: middle; */
    margin-top: -51px;
    margin-left: -24px;
  }
  span {
    line-height: 1.8rem;
    height: 1.8rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    overflow: hidden;
    color: #333;
  }
}
</style>